<template>
  <!-- 前台费用结算页面 -->
  <div>
    <p style="font-size: 25px;border-bottom: 1px solid black;">费用结算</p>
    <div v-for="item in orderList" style="margin-bottom: 5px;">
      <el-card v-if="item.diagnosisId != null">
        <div style="border-bottom: 1px solid black;">
          <span>日期：{{ item.createTime }}</span>
          <span style="margin-left: 40px;">订单号：<b>{{ item.code }}</b></span>
          <span style="margin-left: 50px;">订单类型：<b>医师开单</b></span>
        </div>
        <el-table :data="item.orderDetailList" style="width: 100%;font-size: 13px;">
          <el-table-column prop="petName" label="宠物" width="180">
          </el-table-column>
          <el-table-column prop="userName" label="主治医生">
          </el-table-column>
          <el-table-column prop="checkName" label="药品/检查名称">
          </el-table-column>
          <el-table-column prop="singlePrice" label="费用">
          </el-table-column>
        </el-table>
        <div style="text-align: right;margin-right: 20px;">
          <span>合计：{{ item.payPrice }}</span>
        </div>
        <div style="text-align: right; padding: 15px;">
          <el-button type="primary" v-if="item.payStatus == 0" @click="finalOrder(item.code)">待支付</el-button>
          <el-tag type="success" v-else-if="item.payStatus == 1">已支付</el-tag>
        </div>
      </el-card>
      <el-card v-else>
        <div style="border-bottom: 1px solid black;">
          <span>日期：{{ item.createTime }}</span>
          <span style="margin-left: 40px;">订单号：<b>{{ item.code }}</b></span>
          <span style="margin-left: 50px;">订单类型：<b>平台购药</b></span>
        </div>
        <el-table :data="item.orderDetailList" style="width: 100%;font-size: 13px;">
          <el-table-column prop="checkName" label="药物名称" width="180">
          </el-table-column>
          <el-table-column prop="count" label="数量">
          </el-table-column>
        </el-table>
        <div style="text-align: right;margin-right: 20px;">
          <span>合计：{{ item.payPrice }}</span>
        </div>
        <div style="text-align: right; padding: 15px;">
          <el-button type="primary" v-if="item.payStatus == 0" @click="finalOrder(item.code)">待支付</el-button>
          <el-tag type="success" v-else-if="item.payStatus == 1">已支付</el-tag>
        </div>
      </el-card>
    </div>
    <div style="padding: 10px 0;margin-top: 20px; text-align: center;">
      <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="page"
        :page-sizes="[3, 6, 9, 12]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total">
      </el-pagination>
    </div>
  </div>
</template>

<script>
export default {
  name: "Order",
  data() {
    return {
      orderList: [],
      page: 1,
      pageSize: 6,
      total: 0
    }
  },
  created() {
    this.getOrderList()
  },
  methods: {
    finalOrder(code) {
      //待支付按钮函数 发起订单支付请求 根据订单号
      this.request.get("/order/final", {
        params: {
          orderId: code
        }
      }).then(res => {
        if (res.code == 200) {
          this.$message.success("支付成功")
          this.getOrderList()
        }
      })
    },
    handleSizeChange(pageSize) {//分页每页条数
      this.pageSize = pageSize;
      this.getOrderList();
    },
    handleCurrentChange(page) {//分页页码选择
      this.page = page;
      this.getOrderList();
    },
    getOrderList() {
      //获取订单列表数据 根据客户id
      var user = localStorage.getItem("customer") ? JSON.parse(localStorage.getItem("customer")) : {}
      this.request.get("/order/frontpage", {
        params: {
          customerId: user.id,
          page: this.page,
          pageSize: this.pageSize
        }
      }).then(res => {
        this.orderList = res.data.records
        this.total = res.data.total
        console.log("res===》", this.orderList)
      })
    }
  }
}
</script>

<style lang="less" scoped></style>